import {deletePredict, getLevelColor, getPredictList} from "../../api/storage/ApiPredict.ts";
import {Button, Card, Divider, Space, Tag, Typography} from "@douyinfe/semi-ui";
import {IconEmoji} from "@douyinfe/semi-icons";
import {
    addMessageToConversation,
    addNewConversation,
    getDefaultNewConversationName,
    setNowConversationKey, UserType
} from "../../api/storage/ApiConversation.ts";
import {useState} from "react";
import {KEY_REQUEST_MSG} from "../ai/components/Conversation.tsx";


const HistoryPredict = (props: { changeToAIPageCall: () => void }) => {
    const {Title, Text} = Typography;
    const [predictList, setPredictList] = useState(getPredictList())
    const aiConversationHelper = (prompt: string) => {
        const key = addNewConversation(getDefaultNewConversationName())
        setNowConversationKey(key)
        addMessageToConversation({role: UserType.System, content: prompt})
        localStorage.setItem(KEY_REQUEST_MSG,"分析我的情况，给我一些建议")
        console.log(localStorage.getItem(KEY_REQUEST_MSG))
        props.changeToAIPageCall()
    }
    const deletePredictByKey = (key: string) => {
        deletePredict(key)
        setPredictList(getPredictList)
    }
    return (
        <div style={{margin: 20}}>
            <Card bordered={true} headerLine={true}>
                {
                    predictList.map((predict, index) => (
                            <>
                                <div style={{display: "flex", alignItems: "center", position: "relative"}}>
                                    <Title style={{margin: "10px 5px", color: getLevelColor(predict.riskLevel)}}>
                                        {predict.percent + "%"}
                                    </Title>
                                    <div style={{
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "space-between",
                                        width: "100%"
                                    }}>
                                        <div style={{
                                            display: "flex",
                                            flexDirection: "column",
                                            marginLeft: 10,
                                            marginRight: 50
                                        }}>
                                            <Space style={{display: "flex", alignItems: "center"}}>
                                                <Text>
                                                    {predict.riskLevel}
                                                </Text>
                                                <Text type="tertiary">
                                                    {predict.time}
                                                </Text>
                                            </Space>
                                            <Space wrap style={{marginTop: 5}}>
                                                {predict.tags.map(tag => (
                                                    <Tag key={tag.key} color={"yellow"}>{tag.key}</Tag>
                                                ))}
                                            </Space>
                                        </div>
                                        <Space
                                            style={{display: "flex", alignItems: "center"}}>
                                            <Button icon={<IconEmoji/>} theme={"solid"}
                                                    onClick={() => aiConversationHelper(predict.prompt)}>AI建议</Button>
                                            <Button type="danger"
                                                    onClick={() => deletePredictByKey(predict.key)}>删除预测</Button>
                                        </Space>
                                    </div>
                                </div>
                                {index !== predictList.length - 1 && <Divider margin='12px'/>}
                            </>
                        )
                    )}
            </Card>
        </div>)
};
export default HistoryPredict;